<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六边形展示 clip-path: polygon</title>
    <style>
        .row-dl {
            display: grid;
            grid-template-columns: repeat(12, 3.47em);
            font-size: 12px;
            row-gap: calc(2em + 10px);
            column-gap: 5px;

            margin: 50px;
        }
        .six-box-dl {
            position: relative;
            width: 6.94em;
            /* 正六边形边长4em */
            height: 4em;
            /* 普通项 占2格 */
            grid-column-end: span 2;
        }
        .six-box-dl:nth-child(11n+7) {
            /* 奇数行 第一个 占3格 */
            grid-column-end: span 3;
            /* 靠右 */
            margin-left: calc(3.47em + 5px);
        }
        .six-inner-dl {
            /* position: absolute; */
            /* top: -2em; */
            /* left: 0; */
            width: 6.94em;
            height: 8em;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background-color: pink;
        }


        .six-box-dl img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.6);
            transition: filter 0.3s linear;
            cursor: pointer;
            /* 尖角在两侧 */
            /* clip-path: polygon(100% 50%, 75% 93.3013%, 25% 93.3013%, 0% 50%, 25% 6.6987%, 75% 6.6987%); */
            /* 尖角在上下 */
            /* clip-path: polygon(93.3013% 75%, 50% 100%, 6.6987% 75%, 6.6987% 25%, 50% 0%, 93.3013% 25%); */
        }
        .six-box-dl img:hover {
            filter: brightness(1);
        }
    </style>
</head>
<body>
    <div>
        <div class="row-dl">
            <div class="six-box-dl">
                <div class="six-inner-dl">
                    <img src="./assets/wukong.jpg" alt="">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            <div class="six-box-dl">
                <div class="six-inner-dl">
                </div>
            </div>
            
        </div>
    </div>
    <hr>
    <div>
        <canvas id="cs" width="400px" height="400px" ></canvas>
    </div>

    <script>
        let cs = document.querySelector('#cs');
        let ctx = cs.getContext('2d');
        console.log(ctx);

        ctx.strokeStyle = '#f00';
        // 正六边形的六个顶点坐标为A(-4,0), B(-2,-2), C(1,-2), D(4,1), E(1,4), F(-2,4)。

        let arr = [ 0, 60, 120, 180, 240, 300 ];

        let r = 50;
        let center = {x: 50, y: 50};

        // ctx.beginPath();
        // ctx.arc(center.x, center.y, r, 0, Math.PI*2, false);
        // ctx.closePath();
        // ctx.stroke();

        ctx.beginPath();
        for(let i=0;i<arr.length;i++) {
            // 不加 30 为平的, 加 30 为 尖的
            let deg = arr[i] + 30;

            let x = center.x + r * Math.cos(deg*Math.PI/180);
            let y = center.y + r * Math.sin(deg*Math.PI/180);

            ctx.lineTo(x, y);

            // ctx.arc(x, y, 2, 0, Math.PI*2, false);

            console.log(doNum(x/(r*2)), doNum(y/(r*2)));
        }
        ctx.closePath();
        ctx.stroke();

        function doNum(m) {
            return m.toFixed(6);
        }

    </script>
</body>
</html>